<template>
  <div class="container">
    <!-- 防止外边距合并 -->
    <table></table>
    <!-- 放置一个标签-->
    <img class="img1" src="@/assets/1.jpg" alt="" />
    <!-- 表单控件 -->
    <div class="input">
      <p class="p1">登录</p>
      <!-- 用户手机号 -->
      <img class="icon1" src="../../assets/hui/user5.png" alt="" />
      <!-- 密码 -->
      <img class="icon2" src="../../assets/hui/pasword.png" alt="" />
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field class="pho" v-model="u_phone" name="u_phone" placeholder="用输入手机号"
            :rules="[{ validator: validator1, message: '请填写手机号' }]" />
          <van-field class="psw" v-model="u_pwd" type="password" name="u_pwd" placeholder="请输入密码"
            :rules="[{ validator: validator2, message: '请填写密码' }]" />
        </van-cell-group>
        <!-- 登录按钮 -->
        <van-button class="vbtn" round block type="primary" native-type="submit">
          登录
        </van-button>
      </van-form>
      <RouterLink to="/signin">
        <div class="zc">注册</div>
      </RouterLink>
    </div>
    <p class="p2">其他方式登录</p>
    <div class="a">
      <img class="img3" src="@/assets/hui/QQ8.png" alt="" />
      <img class="img3" src="@/assets/hui/weibo9.png" alt="" />
      <img class="img3" src="@/assets/hui/weixin5.png" alt="" />
    </div>

  </div>
  <div style="position: absolute; left: 10px; bottom: 10px;">
    <p>测试账号:15954165252</p>
    <p>测试密码:123456</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { meApi } from "@/http/apis/meApi";
import router from "@/router";
import { showToast } from "vant";
import { useStore } from "vuex";
import "vant/es/toast/style";
const u_phone = ref(null); //手机号
const u_pwd = ref(null); //密码
// 执行验证手机号验证
const validator1 = (u_phone) => /^1[3-9]\d{9}$/.test(u_phone.trim());
// 验证密码
const validator2 = (u_pwd) => {
  return u_pwd.length >= 6;
};
// 声明vuex
const $store = useStore();

// 执行登录
async function onSubmit(values) {
  let res = await meApi.userLogin(values);
  // console.log(res.data.code);
  if (res.data.code == 200) {
    // console.log('登陆成功', res.data);
    $store.commit("saveUserInfo", res.data.user); // 调用仓库方法修改仓库数据
    $store.commit("saveToken", res.data.token);
    showToast("登陆成功");
    router.push(`/home/index`);
  } else if (res.data.code == 1001) {
    showToast("登陆失败,请检查账号密码是否正确!")
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  position: relative;

  //登录悬浮框
  .input {
    background: #fff;
    width: 80%;
    border-radius: 20px;
    position: absolute;
    left: 10%;
    top: 30%;

    .p1 {
      text-align: center;
      font-size: 25px;
      font-weight: bolder;
      color: #fecd40;
    }

    .pho {
      width: 80%;
      // background-color: aqua;
      margin: 10px 55px;
      font-size: 20px;
    }

    .icon1 {
      width: 45px;
      height: 42px;
      position: absolute;
      top: 43px;
      left: 20px;
    }

    .psw {
      width: 80%;
      margin: 0 55px 10px;
      // background-color: rgb(32, 42, 173);
      font-size: 20px;
    }

    .icon2 {
      width: 43px;
      height: 41px;
      position: absolute;
      top: 98px;
      left: 20px;
    }
  }
}

.img1 {
  width: 100vw;
  height: 80vw;
  display: block;
  border-bottom-left-radius: 31%;
  border-bottom-right-radius: 31%;
  object-fit: cover;
}

.vbtn {
  font-size: 20px;
  background: #fecd40;
  width: 90%;
  margin: 0 auto 10px;
}

.zc {
  display: flex;
  justify-content: flex-end;
  margin-right: 18px;
  color: #646464;
}

.p2 {
  position: absolute;
  bottom: 30vh;
  left: 35%;
}

.a {
  position: absolute;
  bottom: 22vh;
  left: 32%;
}

.img3 {
  width: 40px;
}
</style>
